<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="文章内容">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="文章信息" name="1">
            <div v-for="(item, index) in aData" :key="index"><span>{{item.text}}</span> {{item.dataS}} </div>
          </el-collapse-item>
        </el-collapse>

        <!-- 表格 -->
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row>
            <el-table-column align="center" label="序号" width="80">
              <template slot-scope="scope">
                <span v-text="getIndex(scope.$index)"> </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="versionNum" label="历史版本" style="width: 60px;"></el-table-column>
            <el-table-column align="center" prop="nickname" label="操作人" style="width: 30px;"></el-table-column>
            <el-table-column align="center" prop="roleName" label="角色" style="width: 30px;"></el-table-column>
            <el-table-column align="center" prop="operationType" label="操作类型" style="width: 10px;"></el-table-column>
            <el-table-column align="center" prop="createTime" label="更新时间" style="width: 30px;"></el-table-column>
            <el-table-column align="center" label="操作" >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleDownload(scope.$index, scope.row)">下载</el-button>
               
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.currentPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination> -->
      </el-tab-pane>
      <el-tab-pane label="作者资料">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="基本信息" name="1">
            <div v-for="(item, index) in aDataArticle" :key="index"><span>{{item.text}}</span> {{item.dataS}} </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="文章信息" name="1">
            <div v-for="(item, index) in aDataArticle2" :key="index"><span>{{item.text}}</span> {{item.dataS}} </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import { seniorState,textState,chiefState,opcreateLog,articleRelease } from '../../utils/state.code'
  export default {
    data() {
      return {
        aData: [
          { text: '文章标题:', dataS: ''},
          { text: '作者ID:', dataS: ''},
          { text: '作者名称:', dataS: ''},
          { text: '所属类别:', dataS: ''},
          { text: '所属公司:', dataS: ''},
          { text: '公司代码:', dataS: ''},
          { text: '文章状态:', dataS: ''},
        ],
        aDataArticle: [
          { text: '作者姓名：', dataS: ''},
          { text: 'ID', dataS: ''},
          { text: '电话：', dataS: ''},
          { text: '微信：', dataS: ''},
          { text: '邮箱：', dataS: ''},
        ],
        aDataArticle2: [
          { text: '上传的文章共计：', dataS: ''},
          { text: '发布：', dataS: ''},
          { text: '驳回：', dataS: ''},
          { text: '修改：', dataS: ''},
          { text: '基本面研报：', dataS: ''},
          { text: '跟踪研报：', dataS: ''},
        ],
        articleId: '',//文章id
        activeName: 'second',
        totalCount: 0, //分页组件--数据总条数
        list: [],//表格的数据
        roleType: '',
        listLoading: false,//数据加载等待动画
        listQuery: {
          pageNum: 1,//页码
          pageRow: 10,//每页条数
          name: ''
        },
        userId: '',
        dialogStatus: 'create',
        dialogFormVisible: false,
        textMap: {
          update: '编辑',
          create: '创建文章'
        },
        tempArticle: {
          id: "",
          content: ""
        },
        activeNames: ['1']
      }
    },
    created() {
      // this.getList();
      this.articleId = sessionStorage.getItem('articleId')
      this.roleType = sessionStorage.getItem('type')
      this.articleDetail()
    },
    methods: {
      message(mes){
        //提示框
        this.$message({
          showClose: true,
          message: mes,
          type: 'success'
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleChange(val) {
        console.log(val);
      },
      getUserInfo(){
        this.api({
          url: '/article/authorInfo',
          method: 'post',
          data: {
            userId: this.userId
          }
        }).then(data => {
          this.aDataArticle.map((val,i)=>{
            if(i === 0){
              this.aDataArticle[i].dataS = data.nickname
            }else if(i === 1){
              this.aDataArticle[i].dataS = data.username
            }else if(i === 2){
              this.aDataArticle[i].dataS = data.phoneNum
            }else if(i === 3){
              this.aDataArticle[i].dataS = data.wechatId
            }else if(i === 4){
              this.aDataArticle[i].dataS = data.mailbox
            }
          })
          this.aDataArticle2.map((val,i)=>{
            if(i === 0){
              this.aDataArticle2[i].dataS = data.uploadCount
            }else if(i === 1){
              this.aDataArticle2[i].dataS = data.publishCount
            }else if(i === 2){
              this.aDataArticle2[i].dataS = data.rejectCount
            }else if(i === 3){
              this.aDataArticle2[i].dataS = data.modifyCount
            }else if(i === 4){
              this.aDataArticle2[i].dataS = data.basiCount
            }else{
              this.aDataArticle2[i].dataS = data.tailCount
            }
          })
        })
      },
      articleDetail(){
        // 文章详情
        this.api({
          url: '/article/articleDetail',
          method: 'post',
          data: {
            articleId: this.articleId
          }
        }).then(data => {
          this.userId = data.userId
          this.getUserInfo()
          this.list = data.list
          this.aData.map((val,i)=>{
            if(i === 0){
              this.aData[i].dataS = data.articleTitle
            }else if(i === 1){
              this.aData[i].dataS = data.username
            }else if(i === 2){
              this.aData[i].dataS = data.nickname
            }else if(i === 3){
              this.aData[i].dataS = data.categoryName
            }else if(i === 4){
              this.aData[i].dataS = data.company
            }else if(i === 5){
              this.aData[i].dataS = data.companyCode
            }else{
              if(this.roleType === 'senior'){
                this.aData[i].dataS = seniorState[data.status]
              }else if(this.roleType === 'text'){
                this.aData[i].dataS = textState[data.status]
              }else if(this.roleType === 'chief'){
                this.aData[i].dataS = chiefState[data.status]
              }else if(this.roleType === 'log'){
                this.aData[i].dataS = opcreateLog[data.status]
              }else if(this.roleType === 'articlePool'){
                this.aData[i].dataS = articleRelease[data.status]
              }
            }
          })
        })
      },

      getList() {
        //查询列表
        if (!this.hasPerm('article:list')) {
          return
        }
        this.listLoading = true;
        this.api({
          url: "/article/allListArticle",
          method: "get",
          params: this.listQuery
        }).then(data => {
          this.listLoading = false;
          this.list = data.list;
          this.totalCount = data.totalCount;
        })
      },
      handleSizeChange(val) {
        //改变每页数量
        this.listQuery.pageRow = val
        this.handleFilter();
      },
      handleCurrentChange(val) {
        //改变页码
        this.listQuery.pageNum = val
        this.getList();
      },
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },
      showCreate() {
        //显示新增对话框
        this.tempArticle.content = "";
        this.dialogStatus = "create"
        this.dialogFormVisible = true
      },
      showUpdate($index) {
        //显示修改对话框
        this.tempArticle.id = this.list[$index].id;
        this.tempArticle.content = this.list[$index].content;
        this.dialogStatus = "update"
        this.dialogFormVisible = true
      },
      createArticle() {
        //保存新文章
        this.api({
          url: "/article/addArticle",
          method: "post",
          data: this.tempArticle
        }).then(() => {
          this.getList();
          this.dialogFormVisible = false
        })
      },
      updateArticle() {
        //修改文章
        this.api({
          url: "/article/updateArticle",
          method: "post",
          data: this.tempArticle
        }).then(() => {
          this.getList();
          this.dialogFormVisible = false
        })
      },
      handleDownload(index, row) {
        this.api({
          url: "/article/download",
          method: "post",
          data: {
            articleId: this.list[index].articleId,
            type: 0
          }
        }).then(data => {
          this.message('下载成功!')
          location.href = data.path
        })
      },
    }
  }
</script>
